<style lang="scss" scoped>
  .app-container {
    p {
      font-size: 18px;
      font-weight: 400;
      color: #11263C;
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 10px;
      margin-bottom: 15px;
    }

    /*搜索区域*/
    .el-form {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0px 20px 45px rgba(240, 237, 246, 0.5);
      padding: 10px 20px 0 20px;
      margin-bottom: 20px;

      .el-form-item {
        margin-bottom: 10px;

        ::v-deep .el-form-item__label {
          font-size: 14px;
          font-weight: 400;
          line-height: 32px;
          color: rgba(3, 2, 2, 1);
          text-align: right;
        }

        ::v-deep .el-form-item__content {

          .el-input {
            width: 165px;

            .el-input__inner {
              width: 165px;
              border: 1px solid rgba(127, 127, 213, 0.5);
              border-radius: 10px;
            }
          }

          .el-button {
            height: 32px;
            border-radius: 2px;
            background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
            padding: 8px 18px;
            color: #fff;
            border: none;
            margin-left: 25px;

            &:hover {
              border: none;
              background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);
            }

            &:nth-child(1) {
              width: 60px;
              height: 32px;
              opacity: 1;
              border-radius: 2px;
              background: rgba(242, 243, 245, 1);
              color: rgba(0, 0, 0, 0.3);
              padding: 8px 16px;

              &:hover {
                border: none;
                background: rgb(228, 228, 228);
              }
            }
          }
        }
      }
    }

    .mb20 {
      margin-bottom: 20px;
    }

    .pl0 {
      padding-left: 0 !important;
    }

    .pr0 {
      padding-right: 0 !important;
    }

    p {
      font-size: 18px;
      font-weight: 400;
      line-height: 28px;
      color: rgba(17, 38, 60, 1);
      border-left: 4px solid #545BF5;
    }

    .sec-wrap {
      padding: 20px;

      p {
        margin-bottom: 0;
      }
    }
  }
</style>

<template>
  <div class="app-container">
    <p>收卖数据报表</p>

    <!--搜索区域-->
    <el-form size="small" :inline="true" label-width="70px">
      <el-form-item label="选择时间" prop="orderDate">
        <el-input/>
      </el-form-item>

      <el-form-item label="选择时间" prop="orderDate">
        <el-input/>
      </el-form-item>

      <el-form-item style="display: flex;">
        <el-button size="mini">重置</el-button>
        <el-button type="primary" size="mini">筛选</el-button>
        <el-button type="danger" size="mini">刷新</el-button>
      </el-form-item>
    </el-form>

    <!--第一排-->
    <el-row style="background: #fff;border-radius: 10px 10px 0 0;">
      <!--左侧-->
      <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" class="mb20 pl0">
        <div class="data" style="position: relative;height:450px;">
          <p style="margin-left: 20px;">数据大盘</p>
          <div
            style="position: absolute; display: flex;flex-direction: column;z-index: 1;left: 15px;font-size: 13px;color: #555770;">
            <span>未售总库存数量：{{totalTxt.abnormalBigDecimal || 0}}</span> <span>未售总库存金额：{{totalTxt.bigDecimal || 0}}</span>
            <span>异常金额：{{totalTxt.singular || 0}}</span>
          </div>
          <dataEcharts :data="pie" v-if="pie.length > 0"/>
        </div>
      </el-col>

      <!--右侧-->
      <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="mb20 pr0">
        <div class="data">
          <barEcharts :data="pie" v-if="pie.length > 0"/>
        </div>
      </el-col>
    </el-row>

    <!--第二排-->
    <el-row style="background: #fff;border-radius:0 0 10px 10px;">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <div class="sec-wrap">
          <p>近七日库存动态</p>
          <foldEcharts id="1" :data="Sevendayinventorypl" v-if="Sevendayinventorypl.length > 0" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <div class="sec-wrap">
          <p>近七日销售数据</p>
          <foldEcharts id="2" :data="Sevendaysalesdata" v-if="Sevendaysalesdata.length > 0" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <div class="sec-wrap">
          <p>近七日回收数据</p>
          <foldEcharts id="3" :data="Sevendayinventorypl" v-if="Sevendayinventorypl.length > 0" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import dataEcharts from "./components/dataEcharts";
    import barEcharts from "./components/barEcharts";
    import foldEcharts from "./components/foldEcharts";
    import {getLargeMarket, getLogLogPlot} from "../../api/business/home.js";

    export default {
        components: {dataEcharts, barEcharts, foldEcharts},
        data() {
            return {
                totalTxt: {},//饼图旁边文字
                pie: [],//饼图
                Sevendayinventorypl:[],//回收和库存
                Sevendaysalesdata:[],//七日销售数据
            }
        },
        created() {
            // 数据大盘
            getLargeMarket().then(res => {
                this.pie = res.data.marketPercentage['percentageChart'];
                this.totalTxt = res.data.marketPercentage.percentagemarketData;
            })

            // 七日动态
            getLogLogPlot().then(res => {
                // abnormalBigDecimal 库存金额
                // singular 库存数量
                // abnormaInt回收库存号
                // bigDecimal  回收库存号金额
              this.Sevendayinventorypl =  res.data.Sevendayinventorypl;//回收和动态
              this.Sevendaysalesdata =  res.data.Sevendaysalesdata;//七日销售数据
            })
        }
    }
</script>
